<template>
  <view v-if="_width != '0px' && _width != '0%'" :style="[_width ? { width: _width } : '']" class="flex flex-row flex-row-top-start py-6">
    <view :style="[labelWidth ? { width: labelWidth + 'rpx' } : '']" class="flex-shrink">
      <zh-text _class="opacity-7" :font-size="_fontSize" :label="props.label"></zh-text>
    </view>
    <view class="flex-1 wrap" :style="{ width: '0px' }">
      <slot> <zh-text :color="props.color"  :_class="props.weight ? 'text-weight-b px-16' : 'px-16'" :font-size="_fontSize" :label="props.value"></zh-text></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue';
const _width: string = inject('zhDescriptionsItem', '');
const labelWidth: string = inject('zhDescriptionsLabelWidth', '');
const props = defineProps({
  label: {
    type: String,
    default: '',
  },
  value: {
    type: String,
    default: '',
  },
  weight: {
    type: Boolean,
    default: true,
  },
  color: {
    type: String,
    default: '',
  },
  fontSize: {
    type: Number,
    default: 23,
  },
});
const _fontSize = computed(() => props.fontSize);
</script>

<style></style>
